<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            margin: auto;
            width: 80%;
            border: 1px gray solid;
            border-collapse: collapse;
        }

        th, td {
            border: 1px gray solid;
        }

        thead tr {
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>职位</th>
        <th>上司ID</th>
        <th>入职时间</th>
        <th>工资</th>
        <th>奖金</th>
        <th>部门ID</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
    <tfoot>
    <tr>
        <th colspan="9" id="t1">

        </th>
    </tr>
    </tfoot>
</table>
</body>
</html>
<script>

    function deleteEmp(uid) {
        let flag = window.confirm('你是否要删除么？');
        if(flag){
            let ajax = new XMLHttpRequest();
            ajax.open('get', 'emp?type=delete&id=' + uid);
            ajax.send();
            ajax.onreadystatechange = function () {
                if (ajax.readyState === 4) {
                    // 删除成功后，刷新下
                    loadData(1);
                    loadAllPages();
                }
            }
        }
    }

    function loadData(page) {
        // 清空原来的数据
        document.getElementById('tbody').innerHTML = '';

        let ajax = new XMLHttpRequest();
        ajax.open('get', 'emp?type=page&page=' + page);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                let json = ajax.responseText;
                let i = 1;
                // 将字符串转换成JSON对象
                let jsonObj = JSON.parse(json);
                for (let e of jsonObj) {
                    // 产生了一行九列
                    let trObj = document.createElement('tr');
                    let td1Obj = document.createElement('td');
                    let td2Obj = document.createElement('td');
                    let td3Obj = document.createElement('td');
                    let td4Obj = document.createElement('td');
                    let td5Obj = document.createElement('td');
                    let td6Obj = document.createElement('td');
                    let td7Obj = document.createElement('td');
                    let td8Obj = document.createElement('td');
                    let td9Obj = document.createElement('td');
                    // 给九列分别赋值
                    td1Obj.innerText = i + '';
                    td2Obj.innerText = e.ename;
                    td3Obj.innerText = e.job;
                    td4Obj.innerText = e.mgr;
                    td5Obj.innerText = e.hireDate;
                    td6Obj.innerText = e.sal;
                    td7Obj.innerText = e.comm;
                    td8Obj.innerText = e.deptNo;
                    td9Obj.innerHTML = '<a href="javascript:deleteEmp(' + e.empNo + ')">删除</a>';
                    // 把九列加入到行
                    trObj.appendChild(td1Obj);
                    trObj.appendChild(td2Obj);
                    trObj.appendChild(td3Obj);
                    trObj.appendChild(td4Obj);
                    trObj.appendChild(td5Obj);
                    trObj.appendChild(td6Obj);
                    trObj.appendChild(td7Obj);
                    trObj.appendChild(td8Obj);
                    trObj.appendChild(td9Obj);
                    // 把行放入到表格中
                    document.getElementById('tbody').appendChild(trObj);
                    i++;
                }
            }
        }
    }

    function loadAllPages() {
        let ajax = new XMLHttpRequest();
        ajax.open('get', 'emp?type=pageNum');
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                let pages = ajax.responseText - 0;
                for (let i = 1; i <= pages; i++) {
                    let a = document.createElement('a');
                    a.href = 'javascript:loadData(' + i + ')';
                    a.innerHTML = i + '&nbsp;';
                    document.getElementById('t1').appendChild(a);
                }
            }
        }
    }

    window.onload = function () {
        this.loadData(1);
        this.loadAllPages();
    }
</script>